<template>
  <div ref="editorContainer" class="in-coder-panel" style="height: 300px;"></div>
</template>

<script setup lang="ts">
import { EditorView, basicSetup } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { yaml } from '@codemirror/lang-yaml';
import { javascript } from '@codemirror/lang-javascript';
import { css } from '@codemirror/lang-css';
import { oneDark } from '@codemirror/theme-one-dark';
import jsYaml from 'js-yaml';

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  styleActiveLine: {
    type: Boolean,
    default: true,
  },
  autoRefresh: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['update:value']);
const editorContainer = ref<HTMLDivElement | null>(null);
let editorView: EditorView | null = null;

// 创建编辑器状态
const createState = (content: string) => {
  return EditorState.create({
    doc: content,
    extensions: [
      basicSetup,
      yaml(),
      javascript(),
      css(),
      oneDark,
      EditorView.lineWrapping,
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          const newValue = update.state.doc.toString();
          emits('update:value', newValue);
        }
      }),
      EditorState.readOnly.of(props.disabled || props.readonly),
    ],
  });
};

// 初始化编辑器
const initialize = async () => {
  if (!editorContainer.value) return;
  
  // 销毁现有编辑器实例（如果存在）
  if (editorView) {
    editorView.destroy();
  }
  
  // 创建新的编辑器实例
  const state = createState(props.value);
  editorView = new EditorView({
    state,
    parent: editorContainer.value,
  });
  
  // 强制更新编辑器大小
  nextTick(() => {
    if (editorView) {
      editorView.requestMeasure();
    }
  });
};

// 监听值变化
watch(
  () => props.value,
  (val) => {
    if (editorView) {
      const currentDoc = editorView.state.doc.toString();
      if (currentDoc !== val) {
        editorView.dispatch({
          changes: {
            from: 0,
            to: editorView.state.doc.length,
            insert: val || '',
          },
        });
      }
    }
  },
);

onMounted(() => {
  initialize();
});

onUnmounted(() => {
  if (editorView) {
    editorView.destroy();
  }
});

const checkYaml = async (val: string) => {
  jsYaml.load(val);
};

defineExpose({
  checkYaml,
});
</script>

<style lang="less" scoped>
.in-coder-panel {
  width: 100%;
  height: 300px;
  overflow: hidden;
  
  :deep(.cm-editor) {
    border: 1px solid #eee;
    height: 100% !important;
    width: 100%;
  }
  
  :deep(.cm-scroller) {
    line-height: 24px;
    height: 100%;
  }
  
  :deep(.cm-content) {
    height: 100%;
  }
}

.CodeMirror-lint-tooltip {
  z-index: 10000 !important;
}

:deep(.CodeMirror-line) {
  // padding-left: 28px !important;
  span {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    :first-child {
      //   padding-left: 28px;
    }
  }
}

:deep(.cm-atom) {
  color: #2590ff !important;
}

:deep(.cm-number) {
  color: #e6371c !important;
}

:deep(.CodeMirror-linenumber) {
  font-size: 16px;
  font-weight: 600;
  height: 28px;
  line-height: 28px;
  border-right: 1px solid;
  padding-right: 16px;
}
</style>
